<template>
  <div class="register-container" style="overflow: hidden">
    <el-form ref="form" label-width="70px" class="register-form">
      <h2 class="register-title">注册</h2>
      <el-form-item label="用户名">
        <el-input v-model="username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="password2" show-password></el-input>
      </el-form-item>

      <div class="button">
        <el-button type="primary" @click="submitForm">注册</el-button>
      </div>
      <div class="change">
        点击 <router-link to="/login">这里</router-link> 登录!
      </div>
    </el-form>
  </div>
</template>

<script>
  import { h } from "vue";
  import axios from "axios";
  import { ElButton, ElForm, ElInput, ElFormItem } from "element-plus";

  export default {
    name: "Register",
    data() {
      return {
        username: "",
        password: "",
        password2: "",
        errors: [],
      };
    },
    components: {
      ElButton,
      ElForm,
      ElInput,
      ElFormItem,
    },
    methods: {
      async submitForm() {
        this.errors = [];

        if (this.username === "") {
          this.errors.push("请填写用户名");
        }

        if (this.password === "") {
          this.errors.push("请填写密码");
        } else {
          if (this.password.length < 8) {
            this.errors.push("密码长度不足8个字符");
          }

          if (!/\d/.test(this.password)) {
            this.errors.push("密码需包含数字");
          }

          if (!(/[a-z]/.test(this.password) || /[A-Z]/.test(this.password))) {
            this.errors.push("密码需包含字母");
          }

          if (/\W/.test(this.password)) {
            this.errors.push("密码不能包含特殊字符");
          }
        }

        if (this.password !== this.password2) {
          this.errors.push("两次密码不一致");
        }

        if (!this.errors.length) {
          const formData = {
            username: this.username,
            password: this.password,
          };

          axios.post("register/", formData).then((response) => {
            if (response.data.msg === "用户已存在") {
              this.$notify.error({
                title: "失败",
                message: "用户已存在！",
              });
            } else if (response.data.msg === "注册成功") {
              this.$notify({
                title: "成功",
                message: h("i", { style: "color: green" }, "注册成功！"),
              });
            } else {
              this.$notify({
                title: "警告",
                message: "啊哦，网络开了点小差，请稍候重试",
                type: "warning",
              });
            }
          });
        } else {
          for (var i = 0; i < this.errors.length; i++) {
            this.$notify.error({
              title: "错误",
              message: this.errors[i],
            });
            await setTimeout(function () {}, 100);
          }
        }
      },
    },
  };
</script>

<style acoped>
.register-form {
  width: 350px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.register-container {
  font-family: "微软雅黑";
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: url("../assets/login.jpeg"); */
  background-image: url(../assets/home.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* 标题 */
.register-title {
  color: #303133;
  text-align: center;
}

.change,
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.sign {
  text-align: center;
}
</style>
